<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分组显示测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .group-section {
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 4px;
        }
        .variables-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        .variables-table th,
        .variables-table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        .variables-table th {
            background-color: #e9ecef;
            font-weight: 600;
        }
        .var-read-value {
            font-weight: bold;
            color: #2196F3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>分组显示测试</h1>
        
        <div class="test-area">
            <h2>模拟分组读取结果</h2>
            <p>这里显示从PLC读取的分组数据:</p>
            
            <div id="groups-container">
                <!-- 分组结果将通过JavaScript动态插入 -->
            </div>
        </div>
    </div>

    <script>
        // 模拟API返回的分组数据
        const mockGroupData = {
            "group1": {
                "groupName": "货位状态组",
                "data": {
                    "DB1,W0": 44,
                    "DB1,W2": 3
                }
            },
            "group2": {
                "groupName": "设备控制组",
                "data": {
                    "DB2,X0.0": true,
                    "DB2,X0.1": true
                }
            }
        };
        
        // 显示分组数据
        function displayGroupData(groupData) {
            const container = document.getElementById('groups-container');
            container.innerHTML = '';
            
            for (const [groupId, groupInfo] of Object.entries(groupData)) {
                const groupDiv = document.createElement('div');
                groupDiv.className = 'group-section';
                
                const title = document.createElement('h3');
                title.textContent = `${groupInfo.groupName} (${groupId})`;
                groupDiv.appendChild(title);
                
                // 创建表格
                const table = document.createElement('table');
                table.className = 'variables-table';
                
                // 表头
                const thead = document.createElement('thead');
                const headerRow = document.createElement('tr');
                ['变量名', '变量地址', '读取值'].forEach(text => {
                    const th = document.createElement('th');
                    th.textContent = text;
                    headerRow.appendChild(th);
                });
                thead.appendChild(headerRow);
                table.appendChild(thead);
                
                // 表体
                const tbody = document.createElement('tbody');
                
                // 遍历变量
                for (const [address, value] of Object.entries(groupInfo.data)) {
                    const row = document.createElement('tr');
                    
                    // 变量名（这里简化处理，实际应该从配置中获取）
                    const nameCell = document.createElement('td');
                    nameCell.textContent = `变量${address}`;
                    row.appendChild(nameCell);
                    
                    // 变量地址
                    const addressCell = document.createElement('td');
                    addressCell.textContent = address;
                    row.appendChild(addressCell);
                    
                    // 读取值
                    const valueCell = document.createElement('td');
                    const valueSpan = document.createElement('span');
                    valueSpan.className = 'var-read-value';
                    // 处理值显示逻辑
                    const displayValue = (value !== undefined && value !== null) ? String(value) : '-';
                    valueSpan.textContent = displayValue;
                    valueSpan.title = value;
                    valueCell.appendChild(valueSpan);
                    row.appendChild(valueCell);
                    
                    tbody.appendChild(row);
                }
                
                table.appendChild(tbody);
                groupDiv.appendChild(table);
                container.appendChild(groupDiv);
            }
        }
        
        // 页面加载完成后显示测试数据
        document.addEventListener('DOMContentLoaded', function() {
            displayGroupData(mockGroupData);
        });
    </script>
</body>
</html>